<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>TUCAO-INDEX</title>

    <link rel="stylesheet" href="../css/tucao-area.css" media="screen" type="text/css">
    <!--字体图标库-->
    <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <!--bootstrap-->
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <!--导航求-->
    <link rel="stylesheet" href="../lib/css/gooey.min.css">
    <!--滚动条-->
    <link rel="stylesheet" href="../lib/css/scrollBar.css">
    <!--消息提示组件 CSS-->
    <link rel="stylesheet" href="../lib/spop-gh-pages/dist/spop.css">
    <!--分页-->
    <link rel="stylesheet" href="../lib/css/jquery.pagination.css">
    <!--左下角导航栏 CSS-->
    <link rel="stylesheet" type="text/css" href="../lib/css/nav.css">
</head>

<body onload="run();">
<!--整体布局放在雨滴背景上-->
<div style="position: relative;z-index: 9999">
    <!--左侧 分类标签-->
    <div class='all'>
        <div class='box' id="zhichang">
            <div id="zhichangPoint" class='card bg-01 active'><span class='card-content'>职场 #1</span></div>
        </div>
        <div class='box' id="hunyin">
            <div id="hunyinPoint" class='card bg-02'><span class='card-content'>婚姻 #2</span></div>
        </div>
        <div class='box' id="jiankang">
            <div id="jiankangPoint" class='card bg-02'><span class='card-content'>健康 #3</span></div>
        </div>
        <div class='box' id="yundong">
            <div id="yundongPoint" class='card bg-02'><span class='card-content'>运动 #4</span></div>
        </div>
        <div class='box' id="yingshi">
            <div id="yingshiPoint" class='card bg-02'><span class='card-content'>影视 #5</span></div>
        </div>
        <div class='box' id="meishi">
            <div id="meishiPoint" class='card bg-02'><span class='card-content'>美食 #6</span></div>
        </div>
    </div>

    <!--左下角导航栏-->
    <div class="leftNav-item">
        <ul>
            <li>
                <i class="fa fa-search"></i>
                <a href="#" class="rota" data-toggle="modal" data-target="#searchTucao">查找</a>
            </li>
            <li title="排序">
                <i class="fa fa-sort-amount-desc"></i>
                <a href="#" class="rota" data-toggle="modal" data-target="#sortTucao">排序</a>
            </li>
            <li>
                <i class="fa fa-reply-all"></i>
                <a href="welcome-after.html" class="rota">返回</a>
            </li>
        </ul>
    </div>

    <!--右侧 导航栏-->
    <div class="box-right">
        <nav id="gooey">
            <input type="checkbox" class="menu-open" name="menu-open" id="menu-open"/>

            <label class="open-button" for="menu-open">
                <span class="burger burger-1"></span>
                <span class="burger burger-2"></span>
                <span class="burger burger-3"></span>
            </label>

            <a href="news.html" class="gooey-menu-item" title="首页">
                <i class="fa fa-home"></i>
            </a>
            <a href="tucao-area.html" class="gooey-menu-item" title="吐槽墙">
                <i class="fa fa-comments-o"></i>
            </a>
            <a href="heart-area.html" class="gooey-menu-item" title="心灵小组">
                <i class="fa fa-sun-o"></i>
            </a>
            <a href="manage-my.html" class="gooey-menu-item" title="管理我的">
                <i class="fa fa-user"></i>
            </a>
            <a class="gooey-menu-item" data-toggle="modal" data-target="#addTucao" title="发布">
                <i class="fa fa-plus"></i>
            </a>
        </nav>
    </div>

    <!-- 搜索 -->
    <div id="searchTucao" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h3 class="text-center">搜索吐槽</h3>
                </div>
                <div class="modal-body">
                    <div id="tucaoSearchForm" class="form-group">
                        <div class="form-group">
                            <label for="tucao-find-sort">筛选条件</label>
                            <select id="tucao-find-sort" class="form-control">
                                <option>按吐槽内容查找</option>
                                <option>按发布吐槽用户名查找</option>
                            </select>
                            <div class="form-group">
                                <label for="tucao-find-content">查找条件</label>
                                <textarea class="form-control" id="tucao-find-content" style="resize: vertical;"
                                          placeholder="请输入查找的内容"></textarea>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <button id="searchTucaoBtn" class="btn btn-primary btn-block" type="submit">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 排序 -->
    <div id="sortTucao" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h3 class="text-center">吐槽排序</h3>
                </div>
                <div class="modal-body">
                    <div id="tucaoSortForm" class="form-group">
                        <div class="form-group">
                            <label for="tucao-sort-by">排序条件</label>
                            <select id="tucao-sort-by" class="form-control">
                                <option>按发布时间升序</option>
                                <option>按发布时间降序</option>
                                <option>按点赞数升序</option>
                                <option>按点赞数降序</option>
                                <option>按评论数升序</option>
                                <option>按评论数降序</option>
                            </select>
                        </div>
                        <br>
                        <div class="form-group">
                            <button id="sortTucaoBtn" class="btn btn-primary btn-block" type="submit">排序</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 发布吐槽 -->
    <div id="addTucao" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h3 class="text-center">发布吐槽</h3>
                </div>
                <div class="modal-body">
                    <form id="tucaoForm" class="form-group">
                        <div class="form-group">
                            <label for="tucao-content">内容</label>
                            <textarea class="form-control" id="tucao-content" style="resize: vertical;"
                                      placeholder="请文明吐槽~"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="tucao-sort">分类</label>
                            <select id="tucao-sort" class="form-control">
                                <option selected hidden>请选择吐槽类别</option>
                                <option>职场</option>
                                <option>婚姻</option>
                                <option>健康</option>
                                <option>运动</option>
                                <option>影视</option>
                                <option>美食</option>
                            </select>
                        </div>
                        <br>
                        <div class="form-group">
                            <button id="addTucaoBtn" class="btn btn-primary btn-block" type="submit">发布</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 发布吐槽 end -->

    <!--吐槽内容展示-->
    <div class="tucao-content">
        <!--0-->
        <div id="tucao0" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username0"></span>
                    &nbsp;&nbsp;
                    <!--吐槽类别-->
                    <span id="tucaoSort0"
                          style="background-color: #2b669a;border-radius: 5px;color: #ffffff;font-size: 12px;line-height: 1.083;padding: 3px 6px;"></span>
                </div>
                <div class="time">
                    <span id="time0"></span>&nbsp;&nbsp;<span id="place0"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="tucaoId0" style="display: none"></span>
                <span id="tucaoContent0" style="cursor:pointer">

                    </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum0"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum0"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn0"><i id="likeCron0"
                                                                           class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--1-->
        <div id="tucao1" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username1"></span>
                    &nbsp;&nbsp;
                    <!--吐槽类别-->
                    <span id="tucaoSort1"
                          style="background-color: #2b669a;border-radius: 5px;color: #ffffff;font-size: 12px;line-height: 1.083;padding: 3px 6px;"></span>
                </div>
                <div class="time">
                    <span id="time1"></span>&nbsp;&nbsp;<span id="place1"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="tucaoId1" style="display: none"></span>
                <span id="tucaoContent1" style="cursor:pointer">

                    </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum1"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum1"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn1"><i id="likeCron1"
                                                                           class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--2-->
        <div id="tucao2" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username2"></span>
                    &nbsp;&nbsp;
                    <!--吐槽类别-->
                    <span id="tucaoSort2"
                          style="background-color: #2b669a;border-radius: 5px;color: #ffffff;font-size: 12px;line-height: 1.083;padding: 3px 6px;"></span>
                </div>
                <div class="time">
                    <span id="time2"></span>&nbsp;&nbsp;<span id="place2"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="tucaoId2" style="display: none"></span>
                <span id="tucaoContent2" style="cursor:pointer">

                    </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum2"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum2"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn2"><i id="likeCron2"
                                                                           class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--3-->
        <div id="tucao3" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username3"></span>
                    &nbsp;&nbsp;
                    <!--吐槽类别-->
                    <span id="tucaoSort3"
                          style="background-color: #2b669a;border-radius: 5px;color: #ffffff;font-size: 12px;line-height: 1.083;padding: 3px 6px;"></span>
                </div>
                <div class="time">
                    <span id="time3"></span>&nbsp;&nbsp;<span id="place3"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="tucaoId3" style="display: none"></span>
                <span id="tucaoContent3" style="cursor:pointer">

                    </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum3"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum3"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn3"><i id="likeCron3"
                                                                           class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--4-->
        <div id="tucao4" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username4"></span>
                    &nbsp;&nbsp;
                    <!--吐槽类别-->
                    <span id="tucaoSort4"
                          style="background-color: #2b669a;border-radius: 5px;color: #ffffff;font-size: 12px;line-height: 1.083;padding: 3px 6px;"></span>
                </div>
                <div class="time">
                    <span id="time4"></span>&nbsp;&nbsp;<span id="place4"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="tucaoId4" style="display: none"></span>
                <span id="tucaoContent4" style="cursor:pointer">

                    </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum4"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum4"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn4"><i id="likeCron4"
                                                                           class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--5-->
        <div id="tucao5" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username5"></span>
                    &nbsp;&nbsp;
                    <!--吐槽类别-->
                    <span id="tucaoSort5"
                          style="background-color: #2b669a;border-radius: 5px;color: #ffffff;font-size: 12px;line-height: 1.083;padding: 3px 6px;"></span>
                </div>
                <div class="time">
                    <span id="time5"></span>&nbsp;&nbsp;<span id="place5"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="tucaoId5" style="display: none"></span>
                <span id="tucaoContent5" style="cursor:pointer">

                    </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum5"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum5"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn5"><i id="likeCron5"
                                                                           class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--6-->
        <div id="tucao6" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username6"></span>
                    &nbsp;&nbsp;
                    <!--吐槽类别-->
                    <span id="tucaoSort6"
                          style="background-color: #2b669a;border-radius: 5px;color: #ffffff;font-size: 12px;line-height: 1.083;padding: 3px 6px;"></span>
                </div>
                <div class="time">
                    <span id="time6"></span>&nbsp;&nbsp;<span id="place6"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="tucaoId6" style="display: none"></span>
                <span id="tucaoContent6" style="cursor:pointer">

                    </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum6"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum6"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn6"><i id="likeCron6"
                                                                           class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--7-->
        <div id="tucao7" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username7"></span>
                    &nbsp;&nbsp;
                    <!--吐槽类别-->
                    <span id="tucaoSort7"
                          style="background-color: #2b669a;border-radius: 5px;color: #ffffff;font-size: 12px;line-height: 1.083;padding: 3px 6px;"></span>
                </div>
                <div class="time">
                    <span id="time7"></span>&nbsp;&nbsp;<span id="place7"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="tucaoId7" style="display: none"></span>
                <span id="tucaoContent7" style="cursor:pointer">

                    </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum7"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum7"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn7"><i id="likeCron7"
                                                                           class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--8-->
        <div id="tucao8" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username8"></span>
                    &nbsp;&nbsp;
                    <!--吐槽类别-->
                    <span id="tucaoSort8"
                          style="background-color: #2b669a;border-radius: 5px;color: #ffffff;font-size: 12px;line-height: 1.083;padding: 3px 6px;"></span>
                </div>
                <div class="time">
                    <span id="time8"></span>&nbsp;&nbsp;<span id="place8"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="tucaoId8" style="display: none"></span>
                <span id="tucaoContent8" style="cursor:pointer">

                    </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum8"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum8"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn8"><i id="likeCron8"
                                                                           class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
        <!--9-->
        <!--            <div class="tucao" style="display:none">-->
        <div id="tucao9" class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username9"></span>
                    &nbsp;&nbsp;
                    <!--吐槽类别-->
                    <span id="tucaoSort9"
                          style="background-color: #2b669a;border-radius: 5px;color: #ffffff;font-size: 12px;line-height: 1.083;padding: 3px 6px;"></span>
                </div>
                <div class="time">
                    <span id="time9"></span>&nbsp;&nbsp;<span id="place9"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <span id="tucaoId9" style="display: none"></span>
                <span id="tucaoContent9" style="cursor:pointer">

                    </span>
            </div>
            <!--底部点赞、评论、点击量等信息-->
            <div class="bottom">
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="discussNum9"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right"><i class="fa fa-commenting-o"></i></span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="likeNum9"></span>
                <span style="float: right">&nbsp;</span>
                <span style="float: right;cursor:pointer" id="likeBtn9"><i id="likeCron9"
                                                                           class="fa fa-heart-o"></i></span>
                <!--                    <span style="float: right"><i class="fa fa-heart"></i></span>-->
            </div>
        </div>
    </div>

    <!--底部分页-->
    <div class="bottom-search">
        <div id="pagination" style="position: relative;width: 1000px;left: 300px"></div>
    </div>

</div>

<!--背景 下雨特效-->
<img id="background" alt="background" src="" style="height: 100%;width: 100%"/>

<!--导入JS-->
<!--jquery 1.11.0-->
<script src="../lib/js/jquery-1.11.0.min.js"></script>
<!--右侧导航球-->
<script src="../lib/js/gooey.min.js"></script>
<!--Bootstrap-->
<script src="../lib/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<!--滚动条-->
<script src="../lib/js/scrollBar.js"></script>
<!--雨玻璃背景-->
<script src="../lib/js/rainyday.min.js"></script>
<!--定位当前城市-->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<!--消息提示组件-->
<script src="../lib/spop-gh-pages/dist/spop.js"></script>
<!--分页-->
<script src="../lib/js/jquery.pagination.min.js"></script>
<!--导入JS-->
<script src="../js/tucao-area.js"></script>
</body>

</html>
